<template>
  <div class="strut-div">
    <div class="card-item" style="height: 288px;">
      <p class="card-title">太谷农业概览</p>
      <div class="card-div">
        <div class="overview clear-float">
          <div v-for="(item, index) in agricultureOverviewChart" :key="index">
            <p class="lcd-font"><coun-to :end="item.num" usegroup></coun-to></p>
            <div>{{ item.character }} ({{ item.unit }})</div>
          </div>
        </div>
      </div>
    </div>

	<div>
		<div class="card-item" style="height: 350px; margin-top: 20px; float: left; width: 420px;">
		  <p class="card-title">产业结构</p>
		  <div class="card-div"><common-bar-chart ref="industrialStructureBar" :config="industrialStructureBarConfig"></common-bar-chart></div>
		</div>

		<div class="card-item" style="height: 350px; margin-top: 20px; float: left; width: 420px; margin-left: 20px;">
		  <p class="card-title">农业产业结构</p>
		  <div class="card-div"><common-pieNew-chart ref="industrialStructurePie" :config="industrialStructurePieConfig"></common-pieNew-chart></div>
		</div>
	</div>

    <div class="card-item" style="height: 302px; margin-top: 20px;">
      <p class="card-title">经济发展</p>
      <div class="card-div"><common-mix-chart ref="economicDev" :config="economicDevConfig"></common-mix-chart></div>
    </div>
  </div>
</template>

<script>
import { agricultureOverviewChart, industryStructBarChart, industryStructProportionChart, colorList, economicDevelopBarChart } from '@/network/tg-fake-data.js';
import CounTo from '@/components/count-to';
import CommonBarChart from '@/components/common/common-bar-chart.vue';
import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
import CommonMixChart from '@/components/common/common-mix-chart.vue';
export default {
  components: {
    CounTo,
    CommonBarChart,
    CommonPieNewChart,
    CommonMixChart
  },
  data() {
    return {
      agricultureOverviewChart: agricultureOverviewChart,

      industrialStructureBarConfig: {
        option: {
          id: 'industrialStructureBar',
          xAxis: industryStructBarChart.years,
          y: []
        }
      },
      industrialStructurePieConfig: {
        option: {
          id: 'industrialStructurePie',
          title: '',
          color: colorList,
          legend: {
            show: true,
            left: '13%',
            top: '72%',
            itemGap: 20, //图例之间的间距
            orient: 'horizontal',
            textStyle: {
              color: '#fff',
              fontSize: 15
            },
            data: []
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['25%', '45%'],
              center: ['50%', '38%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'outer',
                  formatter: '{b} :  {d}%',
                  fontSize: '16'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '16',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: []
            }
          ]
        }
      },
      economicDevConfig: {
        option: {
          legend: {
            data: economicDevelopBarChart.names,
            textStyle: {
              fontSize: 14
            }
          },
          id: 'economicDev',
          xAxis: economicDevelopBarChart.xAxis,
          yAxis: [
            {
              type: 'value',
              min: 0,
              max: 100,
              name: '单位（亿元）',
              axisLabel: {
                formatter: '{value}'
              },
              splitLine: {
                show: false
              } //去除网格线
            },
            {
              type: 'value',
              min: 0,
              max: 20,
              name: '增长率（%）',
              axisLabel: {
                formatter: '{value}%'
              },
              splitLine: {
                show: false
              } //去除网格线
            }
          ],
          series: [
            {
              name: economicDevelopBarChart.datas[0].name,
              type: 'bar',
              data: economicDevelopBarChart.datas[0].data,
              color: {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#00FFED' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#00AEFF' // 100% 处的颜色
                  }
                ]
              },
              label: {
                show: true,
                position: 'top',
                formatter: '{c}',
                color: '#00FFED',
                fontSize: 14
              },
              barWidth: 22 //柱图宽度
            },
            {
              name: economicDevelopBarChart.datas[1].name,
              type: 'line',
              yAxisIndex: 1,
              data: economicDevelopBarChart.datas[1].data,
              itemStyle: {
                color: '#F6FF00'
              },
              label: {
                show: true,
                position: 'top',
                formatter: '{c}%',
                color: '#FFF',
                fontSize: 14
              }
            }
          ]
        }
      }
    };
  },
  mounted() {
    this.initIndustrialStructureConfig();
    this.initEconomicDev();
  },
  methods: {
    initIndustrialStructureConfig() {
      industryStructBarChart.dimension.map((item, index) => {
        var bar = {
          title: item,
          data: industryStructBarChart.industryDatas[index],
          color: colorList[index],
          stack: '1',
          position: 'inside'
        };
        if (index == 0) {
          bar.axis = {
            min: 0,
            max: 0,
            name: '单位(亿元)'
          };
        }
        this.industrialStructureBarConfig.option.y.push(bar);
      });
      this.$refs.industrialStructureBar.initChart();

      industryStructProportionChart.map((item, index) => {
        this.industrialStructurePieConfig.option.legend.data.push(item.industry);
        this.industrialStructurePieConfig.option.series[0].data.push({
          value: item.price,
          name: item.industry
        });
      });
      this.$refs.industrialStructurePie.initChart();
    },
    initEconomicDev(){
      this.$refs.economicDev.initChart();
    },
  }
};
</script>

<style lang="scss" scoped>
.overview {
  margin: 10px 20px;
  > div {
    width: 25%;
    float: left;
    text-align: center;
    margin-top: 25px;
    > p {
      color: #ffcb14;
      font-size: 36px;
    }
    > div {
      font-size: 12px;
    }
  }
}
</style>
